<template>
  <!-- <teleport to="body" :disabled="!appendToBody"> -->
  <transition name="dialog-fade" @after-enter="afterEnter" @after-leave="afterLeave" @before-leave="beforeLeave">
    <v-overlay v-show="visible" :mask="modal" custom-mask-event :overlay-class="modalClass" :z-index="zIndex">
      <div
        role="dialog"
        aria-modal="true"
        class="v-overlay-dialog"
        ref="vdialogContent"
        :aria-label="title || undefined"
        :aria-describedby="bodyId"
        :style="overlayDialogStyle"
        @click="overlayEvent.onClick"
        @mousedown="overlayEvent.onMousedown"
        @mouseup="overlayEvent.onMouseup"
      >
        <VFocusTrap
          loop
          :trapped="visible"
          focus-start-el="container"
          @focus-after-trapped="onOpenAutoFocus"
          @focus-after-released="onCloseAutoFocus"
          @focusout-prevented="onFocusoutPrevented"
          @release-requested="onCloseRequested"
        >
          <div :ref="composedDialogRef" class="v-dialog" :style="style" v-bind="$attrs">
            <v-content
              ref="dialogContentRef"
              :center="center"
              :align-center="alignCenter"
              :title="title"
              :loading="loading"
              :draggable="draggable"
              :closable="closable"
              :fullscreen="fullscreen"
              @close="handleClose"
              v-bind="$attrs"
            >
              <template #head>
                <slot v-if="!$slots.title" name="head" :close="handleClose" :title-class="'title'" />
                <slot v-else name="title" />
              </template>
              <slot />
              <template v-if="$slots.footer || footer" #footer>
                <slot name="footer" />
              </template>
            </v-content>
          </div>
        </VFocusTrap>
      </div>
    </v-overlay>
  </transition>
  <!-- </teleport> -->
</template>

<script lang="ts" setup>
  import { ref, reactive, computed, getCurrentInstance, provide, nextTick } from 'vue'
  import { windowProps } from './vwindowProps'
  import { useSameTarget } from '@v-model/shared--hooks'
  import { useVwindow } from './use-window'
  import { dialogInjectionKey } from './constants'
  import VContent from './v-content.vue'
  import VFocusTrap from '../../focus-trap/src/focus-trap.vue'
  import { composeRefs } from '@v-model/shared--utils'
  // import { vElementSize } from '@vueuse/components'

  defineOptions({
    name: 'VWindow',
    inheritAttrs: false,
  })

  const { proxy } = getCurrentInstance()!

  const dialogRef = ref<HTMLElement>()
  const headerRef = ref<HTMLElement>()
  const dialogContentRef = ref()

  // 内容区域
  const vdialogContent = ref(null)

  const props = defineProps(windowProps)

  const {
    style,
    zIndex,
    afterEnter,
    rendered,
    afterLeave,
    beforeLeave,
    handleClose,
    onModalClick,
    titleId,
    bodyId,
    overlayDialogStyle,
    visible,
    onOpenAutoFocus,
    onCloseAutoFocus,
    onCloseRequested,
    onFocusoutPrevented,
  } = useVwindow(props, dialogRef)

  const state = reactive({
    initWidth: props.initWidth,
    initHeight: props.initHeight,
    initLeft: ``,
    top: props.top,
    minimize: false,
    maxmize: props.maxable,
    loading: props.loading,
    marginLeft: '',
    marginTop: '',
  })

  provide(dialogInjectionKey, {
    dialogRef,
    headerRef,
    rendered,
    bodyId,
    style,
  })

  const win_min = function (e) {
    state.minimize = false
    state.maxmize = true
    nextTick(() => {
      const CtlEl: any = vdialogContent.value
      CtlEl.style.left = state.initLeft
      CtlEl.style.top = state.initTop
      CtlEl.style.width = state.initWidth
      CtlEl.style.height = state.initHeight

      if (typeof props.onresize == 'function') {
        props.onresize(CtlEl.offsetWidth, CtlEl.offsetHeight)
      }
    })
  }
  const win_max = function (e) {
    state.minimize = true
    state.maxmize = false
    nextTick(() => {
      const CtlEl: any = vdialogContent.value
      const clientWidth = document.documentElement.clientWidth //页面的宽
      const clientHeight = document.documentElement.clientHeight //页面的高

      CtlEl.style.left = 0
      CtlEl.style.top = 0
      CtlEl.style.width = clientWidth + 'px'
      CtlEl.style.height = clientHeight + 'px'

      if (typeof props.onresize == 'function') {
        props.onresize(CtlEl.offsetWidth, CtlEl.offsetHeight)
      }
    })
  }
  const focusTrapRef = ref<HTMLElement | undefined>()
  const composedDialogRef = composeRefs(focusTrapRef, dialogRef)

  /** 方法定义 */
  // 内部控制窗口开关

  const overlayEvent = useSameTarget(onModalClick)

  const draggable = computed(() => props.draggable && !props.fullscreen)
  //暴露属性
  defineExpose({
    /** @description whether the dialog is visible */
    state,
    visible,
    dialogContentRef,
  })
</script>

<style scoped lang="scss">
  /*-------窗口组件------*/

  .v-overlay-dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
  }
  .v-dialog {
    //         'border-color': theme.color,
    margin: 0 auto;
    // margin-top: calc(50vh - v-bind('props.height') / 2);
    height: v-bind('props.height');
    overflow: hidden;
    background: white;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  :deep(.el-form-item) {
    width: 100%;
    margin-bottom: 12px;
  }

  :deep(.el-input),
  :deep(.el-input-number),
  :deep(.el-select),
  :deep(.el-textarea),
  :deep(.el-input__wrapper) {
    width: 100%;
  }
</style>
